import React from 'react'
import { Modal } from 'antd';
import '../css/header.less'
// 左侧导航组件Sider
import { withRouter } from 'react-router-dom'
import formateDate from '../utils/dateUtils'
import memoryUtils from '../utils/memoryUtils'
import storageUtils from '../utils/storageUtils'
import { reqWeather } from '../api/index.js'
import menuList from '../config/menuConfig.js'

// 导入LinkButton
import LinkButton from './LinkButton'

class Header extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            currentTime: formateDate(Date.now()),
            todayWeather: '',
            todayImg: ''
        }
    }
    // 退出
    logOut = () => {
        Modal.confirm({
            title: '你确定退出吗?',
            onOk:()=>{
              storageUtils.removeUser()
              memoryUtils.user = {}

              this.props.history.replace('/login')
            },
            onCancel() {
              console.log('Cancel');
            },
          });
    }

    // 获取title
    getTitle = () => {
        const path = this.props.location.pathname
        let title
        menuList.forEach(item => {
            if(item.key === path){
                title = item.title
            }else if(item.children){
                const cItem = item.children.find(cItem => cItem.key === path)
                if(cItem){
                    title = cItem.title
                }
            }
        })
        return title
    }

    getTime = () => {
        this.intervalId = setInterval(() => {
            const currentTime = formateDate(Date.now())
            this.setState({
                currentTime
            })
        }, 1000)
    }
    getWeather = async () => {
        const { dayPictureUrl, weather } = await reqWeather('北京')
        // console.log({ dayPictureUrl, weather });
        this.setState({
            todayWeather: weather,
            todayImg: dayPictureUrl
        })
    }

    // 第一次render()之后执行（componentDidMount主要是执行异步请求：ajax请求，定时器）
    componentDidMount() {
        // 获取当前事件
        this.getTime()
        // 获取当前天气信息
        this.getWeather()
    }

    // 当组件卸载之前执行调用
    componentWillUnmount(){
        // 清除定时器
        clearInterval(this.intervalId)
    }

    render() {
        const { currentTime, todayWeather, todayImg } = this.state
        const { username } = memoryUtils.user
        const title = this.getTitle()
        return (
            <div className='header'>
                <div className='header-top'>
                    <span>欢迎！{username} </span>
                    {/* <a href="#" onClick={this.logOut}>退出</a> */}
                    <LinkButton onClick={this.logOut}>退出</LinkButton>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">
                        {title}
                    </div>
                    <div className="header-bottom-right">
                        <span>{currentTime}</span>
                        <img src={todayImg} alt="" />
                        <span>{todayWeather}</span>
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(Header)